<template>
	<view>
		<!-- 当前弹出内容没有实际逻辑 ，可根据当前业务修改弹出提示 -->
		<view class="tips" :class="{ 'tips-ani': tipShow }">为您更新了10条最新新闻动态</view>
		<unicloud-db ref="udb" v-slot:default="{data,loading,error,hasMore,options}" :page-size="10" collection="opendb-news-articles">
			<uni-list>
				<uni-list-item v-for="item in data" :key="item._id" clickable @click="onClick(item)">
					<template v-slot:header>
						<view class="uni-thumb">
							<!-- #ifdef MP-WEIXIN -->
							<image :src="item.avatar" mode="aspectFill"></image>
							<!-- #endif -->
							<!-- #ifndef MP-WEIXIN -->
							<image :src="getAvatar(item.avatar)" mode="aspectFill"></image>
							<!-- #endif -->
						</view>
					</template>
					<template v-slot:body>
						<view class="content">
							<view class="header">
								<view class="header-content">
									<view class="uni-title-sub">
										<text>作者姓名</text>
									</view>
									<view class="uni-note">这是作者的工作单位</view>
								</view>
								<text class="appreciate">71 赞</text>
							</view>
							<view class="comments-content">
								创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内组件创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 组件
							</view>
							<view class="comments-footer">
								<text>09-21 12:30</text>
								<text class="reply-box">12 回复</text>
							</view>
						</view>
					</template>

				</uni-list-item>
			</uni-list>
			<uni-load-more v-if="loading" status="loading"></uni-load-more>
			<uni-load-more v-if="!hasMore && !loading" status="noMore"></uni-load-more>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					status: 'loading', // 加载状态
				},
				tipShow: false // 是否显示顶部提示框
			};
		},
		onLoad() {

		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.formData.status = 'more'
			this.$refs.udb.loadData({ clear: true }, () => {
				this.tipShow = true
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.tipShow = false
				}, 1000)
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		methods: {
			getAvatar(avatar) {
				return typeof avatar === 'string' ? avatar : avatar[0]
			},
			onClick(item) {
				uni.showToast({
					icon: 'none',
					title: `点击了评论Id 为 ${item._id} 的评论`
				})
			}
		}

	};
</script>

<style scoped lang="scss">
	@import '../../common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}


	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.uni-thumb {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.uni-note {
		margin-top: 5px;
	}

	.content {
		flex: 1;
	}

	.header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.header-content {
		flex: 1;
	}

	.appreciate {
		font-size: 14px;
		font-weight: 400;
		color: #666;
	}

	.comments-content {
		margin-top: 5px;
		font-size: 14px;
		color: #333;
		line-height: 1.5;
	}

	.comments-footer {
		font-size: 12px;
		color: #999;
		margin-top: 10px;
	}

	.reply-box {
		margin-left: 5px;
		padding: 2px 10px;
		background-color: #eee;
		border-radius: 20px;
		color: #666;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>